<template>
  <div class="pdf">
    <canvas class="canvasstyle" id="the-canvas" v-show="isshowcanvas"></canvas>
    <div class="home1" v-show="isshowcanvas">
      <router-link to="/">
        <img src="~@/assets/images/swiper/shouye.png">
      </router-link>
    </div>
    <div class="back1" @click="closePdf" v-show="isshowcanvas">
      <img src="~@/assets/images/swiper/fanhui.png">
    </div>
    <div class="playlist" @click="playlist" v-show="isshowcanvas" v-if="isshowplay">
      <img src="~@/assets/images/videoplay/play.png" style="width: 40px; height: 40px">
    </div>
    <div id="prev" class="shangyiye" @click="prev" v-show="isshowcanvas">
      <img src="~@/assets/images/swiper/shangyiye.png">
    </div>
    <div id="next" class="xiayiye" @click="next" v-show="isshowcanvas">
      <img src="~@/assets/images/swiper/xiayiye.png">
    </div>
    <video-play @closeVideo="closeVideo" v-if="isshowvideo" :info="info"></video-play>
  </div>
</template>

<script>
  var PDFJS = require('pdfjs-dist-for-node')
  export default {
    name: 'c-pdf',
    props: ['info', 'infourl'],
    data () {
      return {
        isshowplay: false,
        isshowvideo: false,
        isshowcanvas: true,
        pdfDoc: null,
        pageNum: 1,
        pageRendering: false,
        pageNumPending: null,
        scale: 1.2,
        page_num: 0,
        page_count: 0,
        maxscale: 2,
        minscale: 0.8,
        pdfurl: ''
      }
    },
    mounted () {
      let vm = this
      console.log('mounted.....')
      console.log(vm.info)
      console.log(vm.infourl)
      if (vm.info.length) {
        console.log('0-0')
        vm.isshowplay = true
      }
      vm.pdfurl = vm.infourl
      PDFJS.getDocument(vm.pdfurl).then(function (pdfDoc_) {
        vm.pdfDoc = pdfDoc_
        vm.page_count = vm.pdfDoc.numPages
        vm.renderPage(vm.pageNum)
      })
      document.onkeydown = function () {
        let key = window.event.keyCode
        if (key === 37 || key === 38) {
          vm.prev()
        } else if (key === 39 || key === 40) {
          vm.next()
        }
      }
      document.addEventListener('mousewheel', function (e) {
        let direction = e.deltaY > 0 ? 'down' : 'up'
        if (direction === 'down') {
          vm.next()
        } else if (direction === 'up') {
          vm.prev()
        }
      })
    },
    computed: {
      ctx: function () {
        let id = document.getElementById('the-canvas')
        return id.getContext('2d')
      }
    },
    methods: {
      renderPage: function (num) {
        let vm = this
        this.pageRendering = true
        let canvas = document.getElementById('the-canvas')
        this.pdfDoc.getPage(num).then(function (page) {
          var viewport = page.getViewport(vm.scale)
          canvas.height = viewport.height
          canvas.width = viewport.width
          var renderContext = {
            canvasContext: vm.ctx,
            viewport: viewport
          }
          var renderTask = page.render(renderContext)
          renderTask.promise.then(function () {
            vm.pageRendering = false
            if (vm.pageNumPending !== null) {
              vm.renderPage(vm.pageNumPending)
              vm.pageNumPending = null
            }
          })
        })
        vm.page_num = vm.pageNum
      },
      prev: function () {
        let vm = this
        if (vm.pageNum <= 1) {
          return
        }
        vm.pageNum--
        vm.queueRenderPage(vm.pageNum)
      },
      next: function () {
        let vm = this
        if (vm.pageNum >= vm.page_count) {
          return
        }
        vm.pageNum++
        vm.queueRenderPage(vm.pageNum)
      },
      queueRenderPage: function (num) {
        if (this.pageRendering) {
          this.pageNumPending = num
        } else {
          this.renderPage(num)
        }
      },
      closePdf: function () {
        this.$emit('closePdf')
      },
      playlist: function () {
        console.log('play...')
        this.isshowvideo = true
        this.isshowcanvas = false
      },
      closeVideo: function () {
        // this.$emit.closeVideo()
        this.isshowvideo = false
        this.isshowcanvas = true
      }
    }
  }
</script>

<style>
.pdf {
  background-color: white;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.canvasstyle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
}
.home1 {
  position: absolute;
  top: 50px;
  left: 30px;
  width: 40px;
  height: 60px;
  z-index: 100;
}
.back1 {
  position: absolute;
  top: 130px;
  left: 30px;
  width: 40px;
  height: 60px;
  z-index: 100;
}
.shangyiye {
  position: absolute;
  top: 50px;
  left: 1200px;
  width: 44px;
  height: 60px;
  z-index: 100;
}
.xiayiye {
  position: absolute;
  top: 130px;
  left: 1200px;
  width: 44px;
  height: 60px;
  z-index: 100;
}
.playlist {
  position: absolute;
  top: 210px;
  left: 30px;
  z-index: 100;
}
</style>
